<template>
  <view class="auth-page">
    <view v-if="showAuth" class="auth-container" :style="themeColor">
      <view class="auth-content">
        <view class="card-face-container">
          <image
            class="card-bg"
            :src="specUrl('20250529/health_card.png')"
            alt=""
          />
          <view class="card-top-info">
            <view class="card-top-org">xx省卫生健康委员会</view>
            <view class="card-top-title">
              <image :src="specUrl('20250529/icon2.png')" alt="" />
              <text>电子健康卡</text>
            </view>
          </view>
          <view class="card-detail-info">
            <view class="card-user-info">
              <view>{{ getHospitalName }} 申请</view>
              <view class="desc">获取电子健康卡</view>
            </view>
          </view>
        </view>
        <view class="auth-btn-container">
          <health-card-login
            wechatcode="true"
            @authSuccess="handleAuthSuccess"
            @authFail="handleAuthFail"
            @authCancel="handleAuthCancel"
          >
            <view class="auth-btn"> 点击授权 </view>
          </health-card-login>
          <view class="auth-tips">
            <text>授权后可使用电子健康卡服务</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { specUrl } from '@/utils/icon';
  import { ref, computed } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import healthCard from '../static/ElectronicHealthCard';
  import healthCardUtil from '@/utils/healthCard/index';

  const showAuth = ref(false);
  const type = ref('');

  const getHospitalName = computed(() => {
    return 'xxx医院'
  });

  onLoad(options => {
    type.value = options.type;

    load();
  });

  const load = async () => {
    try {
      healthCardUtil.showLoad('自动授权中');
      const wechatCode = await healthCard.loadWechatCode();
      setTimeout(() => {
        console.log('wechatCode', wechatCode);
        healthCardUtil.hideLoad();
        handleSkip(wechatCode);
      }, 500);
    } catch (error) {
      console.log('error', error);
      showAuth.value = true;
      healthCardUtil.hideLoad();
      // healthCardUtil.toast('暂未授权');
    }
  };
  // 跳转验证地址
  const handleSkip = wechatCode => {
    uni.redirectTo({
      url: `/patientPages/healthCard/webview/index?type=${type.value}&wechatCode=${wechatCode}`,
    });
  };

  // 授权成功回调
  const handleAuthSuccess = async e => {
    console.log(e, '授权成功');
    const wechatCode = e.target.result.wechatCode;
    handleSkip(wechatCode);
  };

  // 授权失败回调
  const handleAuthFail = () => {
    healthCardUtil.toast('授权失败');
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  };

  // 授权取消回调
  const handleAuthCancel = () => {
    healthCardUtil.toast('取消授权');
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  };
</script>

<style lang="scss">
  .auth-container {
    width: 100%;
    padding: 30rpx 24rpx;
    .auth-content {
      padding: 48rpx 26rpx;
      background-color: #fff;
      border-radius: 16rpx;
    }

    .card-face-container {
      height: 388rpx;
      width: 100%;
      margin: 0 auto 108rpx;
      position: relative;
      color: #333333;

      .card-bg {
        height: 100%;
        width: 100%;
        position: absolute;
        clip-path: ellipse(85% 65% at 50% 0%);
        z-index: 2;
      }

      .card-top-info {
        position: absolute;
        top: 40rpx;
        width: 100%;
        padding: 0 27rpx 0 32rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 2;

        .card-top-org {
          font-size: 26rpx;
          font-weight: 500;
        }

        .card-top-title {
          display: flex;
          align-items: center;
          font-size: 30rpx;
          color: #2b2b2b;
          font-weight: 500;

          image {
            height: 60rpx;
            width: 60rpx;
            margin-right: 14rpx;
            display: block;
          }
        }
      }

      .card-detail-info {
        position: absolute;
        top: 50%;
        width: 100%;
        height: 50%;
        padding: 0 18rpx;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        background-color: #fff;

        .card-user-info {
          font-size: 36rpx;
          color: #2b2b2b;
          font-weight: 500;
          line-height: 50rpx;

          .desc {
            font-size: 30rpx;
            line-height: 42rpx;
            padding-top: 8rpx;
          }
        }
      }
    }
    .auth-btn-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      .auth-btn {
        width: 328rpx;
        height: 72rpx;
        line-height: 72rpx;
        text-align: center;
        border: 2rpx solid var(--primary-my-color);
        color: var(--primary-my-color);
        border-radius: 36rpx;
        font-size: 30rpx;
      }
      functional-page-navigator {
        display: inline-block;
        border-radius: 36rpx;
      }
      .auth-tips {
        margin-top: 16rpx;
        text-align: center;
        font-size: 28rpx;
        line-height: 40rpx;
        color: #999999;
      }
    }
  }
</style>
